<template>
    <div class="top-category">
        <div class="container">
            <!-- 面包屑 -->
            <el-breadcrumb :separator-icon="ArrowRight">
                <template v-if="topCategory && topCategory.id">
                    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{
                        topCategory.name
                    }}</el-breadcrumb-item>
                </template>
                <template v-else>
                    <skeleton
                        width="30px"
                        height="18px"
                        style="margin-left: 0px"
                    ></skeleton>
                    <skeleton
                        width="30px"
                        height="18px"
                        style="margin-left: 15px"
                    ></skeleton
                ></template>
            </el-breadcrumb>
            <!-- 所有二级分类 -->
            <el-card class="sub-list" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <span>全部分类</span>
                    </div>
                </template>

                <ul>
                    <li v-for="sub in topCategory.sub" :key="sub.children_id">
                        <el-card shadow="hover">
                            <router-link
                                :to="`/category/sub/${sub.children_id}`"
                            >
                                <el-image
                                    lazy
                                    :src="sub.children_picture"
                                    fit="cover"
                                />
                                <p>{{ sub.children_name }}</p>
                            </router-link>
                        </el-card>
                    </li>
                </ul>
            </el-card>
            <!-- 不同分类商品 -->
            <template v-if="topCategory && topCategory.id">
                <CategoryPanel
                    v-for="item in topCategory.sub"
                    :panelName="item.children_name"
                    :GoodsList="topCategory.goods"
                />
            </template>
        </div>
    </div>
</template>

<script setup>
import CategoryPanel from './components/category-panel.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { categoryStore } from '@/stores/category'
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
// const loading = ref(true)
const useCategoryStore = categoryStore()
// 根据路由的id找到一级分类内容
const topCategory = computed(() => {
    let cate = {}
    const item = useCategoryStore.list.find(item => {
        return item.id == route.params.pid
    })
    if (item) cate = item
    return cate
})
watch(
    () => route.params.pid,
    newVal => {
        if (newVal == topCategory.value.id) {
        } else {
            router.push('/404')
        }
    },
    { immediate: true }
)
</script>

<style lang="scss" scoped>
.el-breadcrumb {
    margin-bottom: 15px;
}
.card-header {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #666;
}
.top-category {
    .sub-list {
        margin-top: 20px;
        background-color: #fff;
        height: 300px;
        ul {
            display: flex;
            padding: 0 32px;
            flex-wrap: wrap;
            margin-bottom: 10px;
            .el-card {
                width: 130px;
                height: 210px;
                display: flex;
                justify-content: center;
                align-items: center;
                .el-card__body {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            li {
                width: 168px;
                height: 90%;
                a {
                    text-align: center;
                    display: block;
                    font-size: 16px;
                    width: 125px;
                    height: 165px;
                    transition: all 0.3s ease;
                    .el-image {
                        width: 90px;
                        height: 130px;
                    }
                    p {
                        line-height: 40px;
                    }
                    &:hover {
                        color: #da9233;
                    }
                }
            }
        }
    }
}
</style>
